<!-- #layout name=blank -->
<div id="app" v-cloak>
  <div class="page-header">
    <div class="title">HTML blocks</div>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a :href="onCreateUrl" class="btn green navbar-btn">New</a>
      <a v-if="selected.length > 0" @click="onDelete" class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>
  <kb-table :data="tableData" show-select :selected.sync="selected">
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <a :href="row.name.url" @click.stop style="cursor: pointer"
          >{{ row.name.text }}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.usedBy">
      <template v-slot="row">
        <a
          v-for="($data, $index) in row.relationsTypes"
          class="label label-sm kb-table-label-refer"
          :style="{ background: Kooboo.getLabelColor($data) }"
          @click.stop="Kooboo.EventBus.publish(row.relationsComm, { id: row.id, by: $data, type: 'HtmlBlock' })"
          >{{ row.relations[$data] + " " +
          Kooboo.text.component.table[$data.toLowerCase()] }}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.lastModified"
      prop="date"
    ></kb-table-column>
    <kb-table-column head-class="table-action" body-class="table-action">
      <template v-slot="row">
        <a
          :title="row.versions.title"
          :href="row.versions.url"
          :target="row.versions.newWindow ? '_blank' : null"
          :class="['btn btn-xs', row.versions.class || 'blue' ]"
          @click.stop
        >
          <i :class="['fa', row.versions.iconClass]"></i>
        </a>
      </template>
    </kb-table-column>
  </kb-table>
  <kb-relation-modal></kb-relation-modal>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbRelationModal.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/HtmlBlocks.js"></script>
